<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <!--当前示例页面样式表引用-->
    <link rel="stylesheet" href="./static/demo/openlayers/example/style.css" />
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <script src="./static/libs/include-openlayers-local.js"></script>

    <style type="text/css">
        #mapCon {
            width: 100%;
            height: 95%;
            position: absolute;
        }
        .checkbox {
            left: 5px;
            position: absolute;
            z-index: 1000;
            bottom: 5px;
        }

         /**
        * 提示框的样式信息
        */
        .tooltip {
            position: relative;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 4px;
            color: white;
            padding: 4px 8px;
            opacity: 0.7;
            white-space: nowrap;
        }

        .tooltip-measure {
            opacity: 1;
            font-weight: bold;
        }

        .tooltip-static {
            background-color: #ffcc33;
            color: black;
            border: 1px solid white;
        }

        .tooltip-measure:before,
        .tooltip-static:before {
            border-top: 6px solid rgba(0, 0, 0, 0.5);
            border-right: 6px solid transparent;
            border-left: 6px solid transparent;
            content: "";
            position: absolute;
            bottom: -6px;
            margin-left: -7px;
            left: 50%;
        }

        .tooltip-static:before {
            border-top-color: #ffcc33;
        }
    </style>

    <script type="text/javascript">
        var vectorSource=null;
        var map = null;
        var TiandiMap_vect = null;
        var TiandiMap_vectcia = null;
        var draw=null; //绘制工具
        var geodesicCheckbox; //地学测量方式选择的Div对象
        var tdk = "4c27d6e0e8a90715b23a989d42272fd8";   //天地图密钥
        function init() {
            //初始化地图容器
            map = new ol.Map({
                target: 'mapCon',     //地图容器div的ID
                controls: ol.control.defaults({
                    attributionOptions: ({
                        collapsible: true
                    })
                }),
                view: new ol.View({
                    center: [12000000, 4000000],  //地图初始中心点
                    maxZoom: 28,     //最大瓦片显示级数
                    minZoom: 1,      //最小瓦片显示级数
                    zoom: 6          //地图初始显示级数
                })
            });
            
            //加载天地图瓦片图层数据
            TiandiMap_vect = new ol.layer.Tile({
                    title: "天地图矢量图层",
                    source: new ol.source.XYZ({
                        url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + tdk,
                        wrapX: false
                    })
            });
            
            TiandiMap_vectcia =new ol.layer.Tile({
                    title: "天地图矢量注记图层",
                    source: new ol.source.XYZ({
                        url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + tdk
                    })
            });

            map.addLayer(TiandiMap_vect);
            map.addLayer(TiandiMap_vectcia);

            //加载测量的绘制矢量层
            vectorSource = new ol.source.Vector(); //图层数据源
            var vectorLayer = new ol.layer.Vector({
                source: vectorSource,
                style: new ol.style.Style({ //图层样式
                    fill: new ol.style.Fill({
                        color: 'rgba(255, 255, 255, 0.2)' //填充颜色
                    }),
                    stroke: new ol.style.Stroke({
                        color: '#ffcc33',  //边框颜色
                        width: 2   // 边框宽度
                    }),
                    image: new ol.style.Circle({
                        radius: 7,
                        fill: new ol.style.Fill({
                            color: '#ffcc33'
                        })
                    })
                })
            });
            map.addLayer(vectorLayer);

            geodesicCheckbox = document.getElementById('geodesic');//测地学方式对象

           
        }
        
        //长度测量
        function lengthMeasure()
        {
            if(draw!==null)
            {
                map.removeInteraction(draw); //移除绘制图形
            }
            createMeasureTooltip(); //创建测量工具提示框
            createHelpTooltip(); //创建帮助提示框
            addInteraction("length"); //添加绘图进行测量
        }
        //面积测量
        function areaMeasure()
        {
            if(draw!==null)
            {
                map.removeInteraction(draw); //移除绘制图形
            }
            createMeasureTooltip(); //创建测量工具提示框
            createHelpTooltip(); //创建帮助提示框
            addInteraction("area");
        }
        //清空测量结果
        function clearAll()
        {
            if(vectorSource!=null)
            {
                vectorSource.clear();
            }
            if(draw!==null)
            {
                map.removeInteraction(draw); //移除绘制图形
            }
            removeTooltip();
        }
       
        
    </script>
</head>

<body onload="init()">
    <div id="mapCon">
        <label class="checkbox"><input type="checkbox" id="geodesic" />use geodesic measures</label>
    </div>

    <div id="menuContain" class='menuContain'>
        <div id="tool-container">
         <div id='dataSourceMenuID'  class="optmain"  status="unactive" onclick="switchMenuStatus(this,'menu1')">
             <span></span><i class="menuGroup">几何测量</i><em></em>
         </div>
     </div>
 </div>
 <div id="menu1" class="menuStrip" style='display:none' >
     <ul  class="menuItems">
         <li   onclick="lengthMeasure()"><span class="item1"></span><i >长度</i>
         </li>
         <li  onclick="areaMeasure()"><span class="item1"></span><i >面积</i>
         </li>
         <li class="divider"></li>
         <li onclick="clearAll()"><span class="item3"></span><i>移除</i>
         </li>
     </ul>
  </div>
 <script>
    function switchMenuStatus(div, menuitemFrameID) {
        var temDivs = document.getElementsByClassName('optmain');
        if (temDivs.length > 0) {
            for (var i = 0; i < temDivs.length; i++) {
                if (temDivs[i] === div) {
                    var status = div.getAttribute("status");
                    if (status == "unactive") {
                        div.setAttribute("status", "active");
                        var tem_spans = div.getElementsByTagName("span");
                        var tem_ems = div.getElementsByTagName("em");
                        tem_spans[0].className = "active";
                        tem_ems[0].className = "active";

                        //显示菜单项
                        DisplayMenuItem(true, menuitemFrameID);

                    }
                    else {
                        div.setAttribute("status", "unactive");
                        var tem_spans = div.getElementsByTagName("span");
                        var tem_ems = div.getElementsByTagName("em");
                        tem_spans[0].className = "";
                        tem_ems[0].className = "";

                        //隐藏菜单项
                        DisplayMenuItem(false, menuitemFrameID);
                    }
                }
                else {
                    var status = temDivs[i].getAttribute("status");
                    if (status == "active") {
                        temDivs[i].setAttribute("status", "unactive");
                        var tem_spans = temDivs[i].getElementsByTagName("span");
                        var tem_ems = temDivs[i].getElementsByTagName("em");
                        tem_spans[0].className = "";
                        tem_ems[0].className = "";
                    }
                }
            }
        }
    }

    function DisplayMenuItem (isDisplay, iframeID) {
        var menuItemFrame = document.getElementById(iframeID);
        if (menuItemFrame != null) {
            if (isDisplay) {
                var temDivs = document.getElementsByClassName('menuStrip');
                if (temDivs.length > 0) {
                    for (var i = 0; i < temDivs.length; i++) {
                        if (temDivs[i] != menuItemFrame) {
                            temDivs[i].style.display = "none";
                        }
                    }   
                }
                menuItemFrame.style.display = "";
            }
            else {
                menuItemFrame.style.display = "none";
            }
        }
    };
    
            /**
         * 当前绘制的要素（Currently drawn feature.）
         * @type {ol.Feature}
         */
         var sketch;
        /**
         * 帮助提示框对象（The help tooltip element.）
         * @type {Element}
         */
        var helpTooltipElement;
        /**
         *帮助提示框显示的信息（Overlay to show the help messages.）
         * @type {ol.Overlay}
         */
        var helpTooltip;
        /**
         * 测量工具提示框对象（The measure tooltip element. ）
         * @type {Element}
         */
        var measureTooltipElement;
        /**
         *测量工具中显示的测量值（Overlay to show the measurement.）
         * @type {ol.Overlay}
         */
        var measureTooltip;
        /**
         *  当用户正在绘制多边形时的提示信息文本
         * @type {string}
         */
        var continuePolygonMsg = 'Click to continue drawing the polygon';
        /**
         * 当用户正在绘制线时的提示信息文本
         * @type {string}
         */
        var continueLineMsg = 'Click to continue drawing the line';

        /**
         * 鼠标移动事件处理函数
         * @param {ol.MapBrowserEvent} evt
         */
        function pointerMoveHandler(evt) {
            if (evt.dragging) {
                return;
            }
            /** @type {string} */
            var helpMsg = 'Click to start drawing';//当前默认提示信息
            //判断绘制几何类型设置相应的帮助提示信息
            if (sketch) {
                var geom = (sketch.getGeometry());
                if (geom instanceof ol.geom.Polygon) {
                    helpMsg = continuePolygonMsg; //绘制多边形时提示相应内容
                } else if (geom instanceof ol.geom.LineString) {
                    helpMsg = continueLineMsg; //绘制线时提示相应内容
                }
            }
            if(helpTooltipElement)
            {
                helpTooltipElement.innerHTML = helpMsg; //将提示信息设置到对话框中显示
                helpTooltip.setPosition(evt.coordinate);//设置帮助提示框的位置
                $(helpTooltipElement).removeClass('hidden');//移除帮助提示框的隐藏样式进行显示
            }

        };
        /**
        * 加载交互绘制控件函数 pType:area/length
        */
        function addInteraction(ptype) {
            var type = (ptype == 'area' ? 'Polygon' : 'LineString');
            draw = new ol.interaction.Draw({
                source: vectorSource,//测量绘制层数据源
                type: /** @type {ol.geom.GeometryType} */ (type),  //几何图形类型
                style: new ol.style.Style({//绘制几何图形的样式
                    fill: new ol.style.Fill({
                        color: 'rgba(255, 255, 255, 0.2)'
                    }),
                    stroke: new ol.style.Stroke({
                        color: 'rgba(0, 0, 0, 0.5)',
                        lineDash: [10, 10],
                        width: 2
                    }),
                    image: new ol.style.Circle({
                        radius: 5,
                        stroke: new ol.style.Stroke({
                            color: 'rgba(0, 0, 0, 0.7)'
                        }),
                        fill: new ol.style.Fill({
                            color: 'rgba(255, 255, 255, 0.2)'
                        })
                    })
                })
            });
            map.addInteraction(draw);

          

            map.on('pointermove', pointerMoveHandler); //地图容器绑定鼠标移动事件，动态显示帮助提示框内容
            //地图绑定鼠标移出事件，鼠标移出时为帮助提示框设置隐藏样式
            $(map.getViewport()).on('mouseout', function () {
                $(helpTooltipElement).addClass('hidden');
            });

            var listener;
            //绑定交互绘制工具开始绘制的事件
            draw.on('drawstart',
              function (evt) {
                  // set sketch
                  sketch = evt.feature; //绘制的要素

                  /** @type {ol.Coordinate|undefined} */
                  var tooltipCoord = evt.coordinate;// 绘制的坐标
                  //绑定change事件，根据绘制几何类型得到测量长度值或面积值，并将其设置到测量工具提示框中显示
                  listener = sketch.getGeometry().on('change', function (evt) {
                      var geom = evt.target;//绘制几何要素
                      var output;
                      if (geom instanceof ol.geom.Polygon) {
                          output = formatArea(/** @type {ol.geom.Polygon} */(geom));//面积值
                          tooltipCoord = geom.getInteriorPoint().getCoordinates();//坐标
                      } else if (geom instanceof ol.geom.LineString) {
                          output = formatLength( /** @type {ol.geom.LineString} */(geom));//长度值
                          tooltipCoord = geom.getLastCoordinate();//坐标
                      }
                      measureTooltipElement.innerHTML = output;//将测量值设置到测量工具提示框中显示
                      measureTooltip.setPosition(tooltipCoord);//设置测量工具提示框的显示位置
                  });
              }, this);
            //绑定交互绘制工具结束绘制的事件
            draw.on('drawend',
                function (evt) {
                    measureTooltipElement.className = 'tooltip tooltip-static'; //设置测量提示框的样式
                    measureTooltip.setOffset([0, -7]);
                    // unset sketch
                    sketch = null; //置空当前绘制的要素对象
                    // unset tooltip so that a new one can be created
                    measureTooltipElement = null; //置空测量工具提示框对象
                    createMeasureTooltip();//重新创建一个测试工具提示框显示结果
                    ol.Observable.unByKey(listener);
                }, this);
        }

        var overLayerList = [];
        /**
        *创建一个新的帮助提示框（tooltip）
        */
        function createHelpTooltip() {
            if (helpTooltipElement) {
                helpTooltipElement.parentNode.removeChild(helpTooltipElement);
            }
            helpTooltipElement = document.createElement('div');
            helpTooltipElement.className = 'tooltip hidden';
            helpTooltip = new ol.Overlay({
                element: helpTooltipElement,
                offset: [15, 0],
                positioning: 'center-left'
            });
            map.addOverlay(helpTooltip);
            overLayerList.push(helpTooltip);
        }

       
        /**
        *创建一个新的测量工具提示框（tooltip）
        */
        function createMeasureTooltip() {
            if (measureTooltipElement) {
                measureTooltipElement.parentNode.removeChild(measureTooltipElement);
            }
            measureTooltipElement = document.createElement('div');
            measureTooltipElement.className = 'tooltip tooltip-measure';
            measureTooltip = new ol.Overlay({
                element: measureTooltipElement,
                offset: [0, -15],
                positioning: 'bottom-center'
            });
            map.addOverlay(measureTooltip);
            overLayerList.push(measureTooltip)
        }
        
        /**
        *清空测量工具所有的提示信息
        */
        function removeTooltip()
        {
            if(overLayerList!=null && overLayerList.length>0)
            {
                var len= overLayerList.length;
                for(var i=len-1;i>=0;i--)
                {
                    map.removeOverlay(overLayerList[i]);
                }
            }
        }

        /**
        * 测量长度输出
        * @param {ol.geom.LineString} line
        * @return {string}
        */
        function formatLength(line) {
            var length;
            var sphere = new ol.Sphere();
            if (geodesicCheckbox.checked) { //若使用测地学方法测量
                var sourceProj = map.getView().getProjection(); //地图数据源投影坐标系
                length = sphere.getLength(line, { "projection": sourceProj, "radius": 6378137 });
            } else {
                length = Math.round(line.getLength() * 100) / 100; //直接得到线的长度
            }
            var output;
            if (length > 100) {
                output = (Math.round(length / 1000 * 100) / 100) + ' ' + 'km'; //换算成KM单位
            } else {
                output = (Math.round(length * 100) / 100) + ' ' + 'm'; //m为单位
            }
            return output;//返回线的长度
        };
        /**
        * 测量面积输出
        * @param {ol.geom.Polygon} polygon
        * @return {string}
        */
        function formatArea(polygon) {
            var area;
            var sphere = new ol.Sphere();
            if (geodesicCheckbox.checked) {//若使用测地学方法测量
                var sourceProj = map.getView().getProjection();//地图数据源投影坐标系
                var geom = /** @type {ol.geom.Polygon} */(polygon.clone().transform(sourceProj, 'EPSG:4326')); //将多边形要素坐标系投影为EPSG:4326
                area = Math.abs(sphere.getArea(geom, { "projection": sourceProj, "radius": 6378137 })); //获取面积
            } else {
                area = polygon.getArea();//直接获取多边形的面积
            }
            var output;
            if (area > 10000) {
                output = (Math.round(area / 1000000 * 100) / 100) + ' ' + 'km<sup>2</sup>'; //换算成KM单位
            } else {
                output = (Math.round(area * 100) / 100) + ' ' + 'm<sup>2</sup>';//m为单位
            }
            return output; //返回多边形的面积
        };

 </script>
</body>

</html>